<template>
	<view >
		<view class="tom-day" v-for="(t,i) in tomdayList" :key="i">
			<view class="desc">
				{{t.title}}
				<text class="count">共{{t.foodList.length}}道菜</text>
			</view>
			<view class="foodList" v-for="(f,j) in t.foodList" :key="j">
				<img class="banner" :src="f.picture" alt=""  @click="goFood(f.foodId)">
				<text class="name">{{f.name}}</text>
				<view class="summary">
					<text class="like">{{f.hits}}人浏览</text>
					<text class="catch">{{f.favorites}}收藏</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: 0,
				tomdayList: [],
			}
		},
		methods: {
			getData() {
				uni.request({
					url: `https://appfly.cn/api/cookbookCommon/foodDailyList?dailyDate=${this.time}`,
	
					success: (res) => {
						this.tomdayList = res.data.data
						// console.log(res.data);//输出
						console.log(this.tomdayList);
					}
				});
			},
	
			goFood(id) {
				uni.navigateTo({
					url: `/pages/food/food?id=${id}`
				})
			}
	
		},
		mounted() {
			let time = new Date();
			let month =
				parseInt(time.getMonth() + 1) < 10 ?
				"0" + parseInt(time.getMonth() + 1) :
				parseInt(time.getMonth() + 1);
			let day =
				time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
			time = time.getFullYear() + "-" + month + "-" + (day+1);
			this.time=time
			this.getData()
			console.log(this.time);
		},
		onLoad(options) {
			
		}
	}
</script>

<style lang="scss">
	.tom-day{
		width: 93vw;
		margin-top: 20px;
		.desc{
			margin-bottom: 20px;
			font-size: 18px;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			.count{
				font-size: 16px;
				font-weight: 700;
				color: #999;
			}
		}
		.foodList{
			position: relative;
			margin-bottom: 20px;
			.banner{
				width: 93vw;
				height: 200px;
				border-radius: 8px;
			
			}
			.name{
				font-size: 18px;
				font-weight: 700;
				color: white;
				position: absolute;
				top: 5%;
				left: 5%;
			}
			.summary{
				margin-top: 8px;
				display: flex;
				color: #999;
				justify-content: space-between;
			}
		}
	
	}
</style>